<template>
    <div class="components_edit_modal">
        <el-dialog title="生成培养计划 · 配置页" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="form"   :rules="rules" ref="form">
                <el-form-item label="学校："  prop="schoolId">
                    <el-select filterable clearable v-model="form.schoolId" placeholder="请选择学校" @change="changeSchool">
                        <el-option
                            v-for="item in schoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院：" prop="secondSchoolId">
                    <el-select filterable clearable v-model="form.secondSchoolId" placeholder="请选择学院" @change="changeSecondSchool">
                        <el-option
                            v-for="item in secondSchoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业：" prop="professionId">
                    <el-select filterable clearable v-model="form.professionId" placeholder="请选择专业" @change="changeProfession">
                        <el-option
                            v-for="item in professionList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级：" prop="grade">
                     <el-select filterable clearable v-model="form.grade" placeholder="请选择年级"  @change="changeGrade">
                        <el-option
                            v-for="item in gradeList" :key="item.grade"
                            :label="item.gradeShow"
                            :value="item.grade">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期：" prop="semester">
                    <el-select filterable clearable v-model="form.semester" placeholder="请选择学期">
                        <el-option
                            v-for="item in semesterList" :key="item.value"
                            :label="item.semester"
                            :value="item.semester">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
                 state: false,
                 rules: {
                    schoolId: [
                        { required: true, message: '请选择院校', trigger: 'change', type: 'number' }
                    ],
                    secondSchoolId: [
                         { required: true, message: '请选择院系', trigger: 'change', type: 'number' }
                    ],
                    professionId: [
                        { required: true, message: '请选择所属专业', trigger: 'change', type: 'number'},
                    ],
                    grade: [
                        { required: true, message: '请选择年级', trigger: 'change', type: 'string'},
                    ],
                    semester: [
                        { required: true, message: '请选择学期', trigger: 'change', type: 'string'},
                    ],
                 },
                form: {
                    schoolId:null,
                    secondSchoolId:null,
                    professionId:null,
                    grade:null,
                    semester:null,
                    semesterNum: null,
                },
                // 二级院校列表
                secondSchoolList:null,
                // 专业列表
                professionList:null,
                // 年级列表
                gradeList:null,
                // 班级列表
                semesterList:null,
            }
        },
        created() {
            // 获取学期列表数据
            // this.getSemesterListByDicts();
        },
        mounted() {},
        computed:{
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        methods: {
            // 打开模态框
            showDialog(){
                this.state = true;
                this.$nextTick(function(){
                    this.$refs['form'].resetFields();
                })
            },
             // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.form.secondSchoolId = null;
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
             // 获取二级院系数据
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.form.professionId = null;
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询年级 (来自班级表数据)
            getGradeList(professionId){
                let vm = this;
                vm.axios.get(api.schoolClass.queryGradeList, {
                     params: {
                        professionId: professionId,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.form.grade = null;
                        this.gradeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询学期列表(来自校历)
            getSemestersList(professionId, grade){
                let vm = this;
                vm.axios.get(api.getSemestersByCalendar, {
                     params: {
                        professionId: professionId,
                        grade: grade,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 保存班级
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if (valid) {
                        // 处理数据
                        vm.form.schoolName = _.find(vm.schoolList, {id: vm.form.schoolId}).text;
                        vm.form.secondSchoolName = _.find(vm.secondSchoolList, {id: vm.form.secondSchoolId}).text;
                        vm.form.professionName =  _.find(vm.professionList, {id: vm.form.professionId}).text;
                        vm.form.semesterNum =  _.find(vm.semesterList, {semester: vm.form.semester}).semesterNum;
                        // console.log(vm.form);
                        // return;
                        vm.axios.post(api.trainPlan.generate, vm.form)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                // 关闭弹出窗口
                                vm.state = false;
                                // 刷新table
                                vm.$parent.$refs.trainPlanTable.$emit('vuetable:refresh');
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });

            },
            changeSchool(schoolId){
                this.form.secondSchoolId = null;
                this.secondSchoolList = [];
                this.form.professionId = null;
                this.professionList = [];
                this.form.grade = null;
                this.gradeList = [];
                this.form.semester = null;
                this.semesterList = [];
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId){
                this.form.professionId = null;
                this.professionList = [];
                this.form.grade = null;
                this.gradeList = [];
                this.form.semester = null;
                this.semesterList = [];
                this.getProfessionList(this.form.schoolId, secondSchoolId);
            },
            changeProfession(professionId){
                this.form.grade = null;
                this.gradeList = [];
                this.form.semester = null;
                this.semesterList = [];
                this.getGradeList(professionId);
            },
            changeGrade(grade){
                this.form.semester = null;
                this.semesterList = [];
                this.getSemestersList(this.form.professionId, grade);
            }
        },
        components: {}
    };
</script>
<style>
</style>